<template>
  <div style="padding: 20px; border-radius: 8px;">
    <el-card class="box-card" style="width: 700px; margin: 0 auto; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);">
      <div slot="header" class="clearfix">
        <span>设备设置</span>
      </div>

      <div class="block" style="margin-bottom: 20px;">
        <span class="demonstration">亮度</span>
        <el-slider v-model="value1" height="8px" :active-color="'#409EFF'" :inactive-color="'#dcdfe6'" transition="all 0.3s ease"></el-slider>
      </div>

      <div class="block" style="margin-bottom: 20px;">
        <span class="demonstration">声音</span>
        <el-slider v-model="value2" height="8px" :active-color="'#67c23a'" :inactive-color="'#dcdfe6'" transition="all 0.3s ease"></el-slider>
      </div>

      <div class="block" style="margin-bottom: 20px;">
        <span class="demonstration">分辨率</span>
        <el-slider v-model="value3" :show-tooltip="false" height="8px" :active-color="'#e6a23c'" :inactive-color="'#dcdfe6'" transition="all 0.3s ease"></el-slider>
      </div>

      <div class="block" style="margin-bottom: 20px;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span>亮度自适应</span>
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0" transition="all 0.3s ease"></el-switch>
        </div>
      </div>

      <div class="block">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span>弹屏</span>
          <el-switch v-model="value4" active-text="关" inactive-text="开" transition="all 0.3s ease"></el-switch>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 60,
        value2: 50,
        value3: 30,
        value: '100',
        value4: true,
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      }
    }
  }
</script>

<style scoped>
.block {
  max-width: 90%;
  margin: 0 auto 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block > div {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.demonstration {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-card {
  overflow: hidden;
  width: 700px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .box-card {
    width: 95%;
    padding: 10px;
  }

  .demonstration {
    width: 80px;
  }
}
</style>